.pub_panic_buy {
    .page_box {
        height: 100vh;
        background-color: #9E2C1D;

        .page {
            background: url("@/static/aimg/img_48.png") top center no-repeat #9E2C1D;
            background-size: 100vw auto;
        }

        .top_div {
            position: relative;
            padding: calc(70vw + var(--status-bar-height)) 0 0 0;

            .num {
                position: absolute;
                left: 15rpx;
                top: calc(150rpx + var(--status-bar-height));
                width: 90vw;

                .txt {
                    position: absolute;
                    left: 0;
                    top: 0;
                    min-width: 240rpx;
                    height: 60rpx;
                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #FBBE41);
                    border-radius: 30rpx;
                    padding: 0 40rpx 0 80rpx;
                    line-height: 60rpx;
                    color: #fff;
                    font-size: 24rpx;
                    font-weight: bold;
                }

                .txt::before {
                    width: 80rpx;
                    height: 80rpx;
                    position: absolute;
                    left: 0;
                    top: -20rpx;
                    content: "";
                }

                .txt_1::before {
                    background: url("@/static/aimg/img_36.png") center no-repeat;
                    background-size: 60rpx;
                }

                .txt_2 {
                    top: 80rpx;
                }

                .txt_2::before {
                    background: url("@/static/aimg/img_37.png") center no-repeat;
                    background-size: 60rpx;
                }


                .txt_3 {
                    top: 240rpx;
                }

                .txt_3::before {
                    background: url("@/static/aimg/img_49.png") center no-repeat;
                    background-size: 60rpx;
                }

                .txt_4 {
                    top: 160rpx;
                }

                .txt_4::before {
                    background: url("@/static/aimg/img_38.png") center no-repeat;
                    background-size: 70rpx;
                }


            }

            .jdt {
                width: 100vw;
                height: 120rpx;
                // background-color: #DBAE52;
                background: url("@/static/aimg/img_58.png") center no-repeat;
                background-size: 100vw 120rpx;
                border-radius: 25rpx;
                margin: 0 auto;
                padding: 36rpx 10.6vw;

                .has_box {
                    width: 100%;
                    height: 44rpx;
                    overflow: hidden;
                    border-radius: 22rpx;
                }

                .has {
                    width: 0%;
                    height: 44rpx;
                    // border-radius: 22rpx;
                    // border-top-left-radius: 22rpx;
                    background: url("@/static/aimg/img_59.png") right center repeat-x;
                    background-size: auto 44rpx;
                    transition: width 0.4s;
                }
            }

            .djs {
                width: 100vw;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 60rpx auto 30rpx auto;
                position: relative;
                padding: 150rpx 0 100rpx 0;

                .cont {
                    width: 100vw;
                    height: 330rpx;
                    background: url("@/static/aimg/img_50.png") center no-repeat;
                    background-size: 330rpx;
                    // padding: 110rpx 0 0 0;
                    position: relative;
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    align-content: center;

                    .txt_1 {
                        width: 100%;
                        text-align: center;
                        line-height: 40rpx;
                        color: #fff;
                        font-size: 28rpx;
                    }

                    .txt_2 {
                        line-height: 60rpx;
                        color: #fff;
                        font-size: 48rpx;
                        width: 100%;
                        text-align: center;
                        font-weight: bold;
                        margin-top: 10rpx;
                    }
                }

                .cont_mask {
                    width: 330rpx;
                    height: 330rpx;
                    position: absolute;
                    top: 150rpx;
                    left: 50%;
                    margin-left: -175rpx;
                    z-index: 3;
                }

                .gif_list {
                    position: absolute;
                    z-index: 2;
                    width: 100%;
                    height: 330rpx;

                    .img {
                        position: absolute;
                        width: 50rpx;
                        height: 50rpx;
                    }
                }

                .cont_type_1 {
                    background: url("@/static/aimg/img_51.png") center no-repeat;
                    background-size: 330rpx;
                }

                .cont_click {
                    background: url("@/static/aimg/img_51.png") center no-repeat;
                    background-size: 330rpx;
                }

                .cont_img {
                    position: absolute;
                    top: 70rpx;
                    left: 50%;
                    margin-left: -250rpx;
                    width: 500rpx;
                    height: 500rpx;
                    background: url("@/static/aimg/img_52.gif") center no-repeat;
                    background-size: cover;
                }

                .dm {
                    position: absolute;
                    left: 10vw;
                    top: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    padding: 25rpx 32rpx;
                    border-radius: 20rpx;

                    .txt {
                        line-height: 40rpx;
                        color: #fff;
                        font-size: 24rpx;
                    }
                }

            }


            .choose {
                line-height: 40rpx;
                text-align: center;
                font-size: 22rpx;
                color: #FFFFFF;

                .icon-font-basic {
                    font-size: 24rpx;
                    margin: 0 10rpx 0 0;
                }
            }
        }

        .goods_div {
            width: calc(100vw - 50rpx);
            margin: 80rpx auto 180rpx auto;
            background-color: #fff;
            border-radius: 20rpx;
            padding: 80rpx 30rpx 10rpx 30rpx;
            background: url("@/static/aimg/img_53.png") top 40rpx center no-repeat #fff;
            background-size: 320rpx auto;

            .title {
                line-height: 110rpx;
                color: #000000;
                font-size: 32rpx;
                font-weight: bold;
                padding: 0 0 0 30rpx;
                position: relative;
            }

            .title::before {
                width: 9rpx;
                height: 32rpx;
                position: absolute;
                top: 50%;
                margin-top: -16rpx;
                left: 0;
                content: "";
                background-color: #FF2E2E;
                border-radius: 10rpx;
            }

            .lis {
                width: 100%;

                .li {
                    display: flex;
                    margin-bottom: 60rpx;

                    .img {
                        width: 150rpx;
                        height: 150rpx;
                    }

                    .text {
                        width: calc(100% - 150rpx);
                        padding: 15rpx 0 0 30rpx;
                        position: relative;

                        .name {
                            line-height: 40rpx;
                            color: #000000;
                            font-size: 32rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .msg {
                            line-height: 30rpx;
                            color: #545454;
                            font-size: 24rpx;
                            margin-top: 30rpx;
                        }

                        .btn {
                            width: 150rpx;
                            height: 50rpx;
                            line-height: 50rpx;
                            text-align: center;
                            color: #FFFFFF;
                            font-size: 24rpx;
                            background-color: #FF2E2E;
                            border-radius: 25rpx;
                            position: absolute;
                            right: 0;
                            bottom: 20rpx;
                        }
                    }
                }
            }
        }
    }

    .pub_alert {
        .cont {
            width: 100vw;
            background-image: unset;
            padding: 0 0 100rpx 0;
            position: relative;

            .close {
                position: absolute;
                right: 10vw;
                top: 0;
                margin: 0;
            }

            .txt_1 {
                width: 100%;
                height: 50vw;
                background: url("@/static/aimg/img_54.png") center no-repeat;
                background-size: 80vw auto;
            }

            .txt_2 {
                width: 100%;
                height: 50vw;
                background: url("@/static/aimg/img_55.png") center no-repeat;
                background-size: 100vw auto;
                padding: 41vw 0 0 0;
                text-align: center;
                color: #F9EEB9;
                font-size: 28rpx;
                font-weight: bold;
                line-height: 5.5vw;
            }
        }
    }
}